<template>
    <!-- 用户列表 -->
    <div class="">
        <div class="head">
            <span>用户列表>用户列表</span>
        </div>
        <div class="user">
            <div class="user-head">
                <span>用户概况</span>
                <span>统计截止时间:{{ date }}</span>
            </div>
            <div class="user-view">
                <div class="user-view-a">
                    <span class="aa">总用户数</span>
                    <span class="aa1">{{ user }}</span>
                    <span class="aa">昨日:{{ yuser }}</span>
                </div>
                <div class="user-view-a">
                    <span class="aa">今日新增用户数</span>
                    <span class="aa1">{{ xuser }}</span>
                    <span class="aa">昨日:{{ yxuser }}</span>
                </div>
                <div class="user-view-a">
                    <span class="aa">今日支付人数</span>
                    <span class="aa1">{{ zuser }}</span>
                    <span class="aa">昨日:{{ yzuser }}</span>
                </div>
                <div class="user-view-a">
                    <span class="aa">今日客单价</span>
                    <span class="aa1">￥{{ money }}</span>
                    <span class="aa">昨日:￥{{ ymoney }}</span>
                </div>
            </div>
        </div>
        <div class="sou">
            <div>
                <span>关键词</span>
                <input type="text" placeholder="请输入用户昵称搜索" v-model="keyword">
                <span>注册时间</span>
                <el-config-provider :locale="locale">
                <el-date-picker
                  v-model="value2"
                  type="date"
                  :default-value="new Date(2023, 5, 5)"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  style="width: 120px;"
                /></el-config-provider>
                <span style="margin:0 10px 0 10px ;">至</span>
                <el-config-provider :locale="locale">
                <el-date-picker
                  v-model="value3"
                  type="date"
                  :default-value="new Date(2023, 5, 5)"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  style="width: 120px;"
                /></el-config-provider>
            </div>
            <div class="sou-button">
                <button @click="onsai">筛选</button>
                <button @click="onqin">清空</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="view">
            <el-table
            :data="tableData1.tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :key="tableData1.tableData.length"
            >
            <el-table-column prop="username" label="用户" width="180" align="center" />
            <el-table-column prop="money" label="消费金额(元)" align="center"/>
            <el-table-column prop="count" sortable label="消费次数" align="center"/>
            <el-table-column prop="lastLoginTime" sortable label="上次消费时间" align="center" />
            <el-table-column prop="lastLoginTime" sortable label="最后访问时间" align="center"/>
            <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                style="color:#ed742f"
                :key="scope.row.userId"
                >编辑</el-button>
            </template>
            </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 通过模态框 -->
        <div class="refuse" v-if="passshow"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>添加标签</span>
              <span @click="close()">X</span>
            </div>
            <div class="refuseView-Y">
                <el-table
            :data="options"
            border
            style="width: 100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
            <el-table-column prop="label" label="标签名" width="289px" align="center" />
            <el-table-column fixed="right" label="操作" width="290px" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                style="color:white;border: 1px solid #ed742f;
                background-color: #ed742f;width: 60px;height: 30px;border-radius: 5px;"
                v-if="scope.row.xuan==true"
                >已选</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="closeK(scope.row)"
                v-if="scope.row.xuan==false"
                style="color:#ed742f;border: 1px solid #81807f;
                background-color: white;width: 60px;height: 30px;border-radius: 5px;"
                >选择</el-button>
            </template>
            </el-table-column>
            </el-table>
              <div class="mobutton">
                <button @click="passbutton()"  class="closebutton" >确定</button>
                <button @click="close()" class="passbutton">取消</button>
              </div>
            </div>
          </div>
          
        </div>
    </div>
</template>

<script setup lang="ts">
import {  ref,onBeforeMount, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import nuser from '@/service/user'
import  zhCn  from "element-plus/lib/locale/lang/zh-cn";

const route=useRouter()
const date=ref('2023/02/11')
const user=ref('20')//总用户数
const yuser=ref('8')//昨日总用户
const xuser=ref('2')//今日新增用户数
const yxuser=ref('8')//昨日新增用户数
const zuser=ref('20')//今日支付用户数
const yzuser=ref('19')//昨日支付用户数
const money=ref("322")//今日客单价
const ymoney=ref("311")//昨日客单价
const value2 = ref([])//搜索注册时间选择
const value3 = ref([])//搜索注册时间选择
const pagesize=ref(5) //每页显示多少条
const currentPage=ref(1) //当前是第几页
let Total=ref(10) //总条数
const passshow=ref(false) //通过模态框
const keyword=ref('') //搜索框关键词
const locale=zhCn //elment 中文包
// 表格

let tableData1= reactive({tableData:[
  {
    username:'null',//用户
    money:"null",//消费金额
    count: 'null',//消费次数
    lastLoginTime:'unll',//上次消费时间
    userId:1
  },
  {
    username:'null',//用户
    money:"null",//消费金额
    count: 'null',//消费次数
    lastLoginTime:'unll',//上次消费时间
    userId:2
  }
]})

// 用户标签选择的内容
const options = [
  {
    value: '标签1',
    label: '标签1',
    xuan:true
  },
  {
    value: '标签2',
    label: '标签2',
    xuan:false
  },
  {
    value: '标签3',
    label: '标签3',
    xuan:false
  },
  {
    value: '标签4',
    label: '标签4',
    xuan:false
  },
  {
    value: '标签5',
    label: '标签5',
    xuan:false
  },
]
// 从后台获取用户数据
const huo=((outside:any)=>{
  // console.log('最初的数据');
  
  // console.log(tableData);
 
  let c:any=reactive([])
  outside.then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    else{
      let a=res.data.data
    for(let b of a){
      b.lastLoginTime=b.lastLoginTime.substring(0,19) //截取时间
      b.lastLoginTime=b.lastLoginTime.replace('T',' ') //把T去了
      b.money='￥'+b.money //价格叨唠
      c.push({
        username:b.username,
        money:b.money,
        count:b.count,
        lastLoginTime:b.lastLoginTime,
        userId:b.userId
      })
      // console.log(a);
      
    }
    
    tableData1.tableData=c
    }
    console.log('!!');
    
    console.log(Total);
    // Total.value=Number(Math.ceil(c.length/pagesize.value)) //初始化更新分页总数
    Total.value=Number(c.length)
    console.log(Total);
    
    
    
  })
})
 onBeforeMount(()=>{
  
  // 从后台获取用户数据
    huo(nuser.userInformation())
  // 从后台获取用户总数
  nuser.userzong().then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    user.value=res.data.data
  })
  // 从后台获取昨日用户总数
  nuser.zuserzong().then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    yuser.value=res.data.data
  })
  // 今日新增用户
  nuser.newuser().then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    xuser.value=res.data.data
    console.log(typeof res.data.data);
    
  })
  // 昨日新增用户
  nuser.znewuser().then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    yxuser.value=res.data.data
  })
  
  
  
})
onMounted(()=>{
  // console.log('==');
  
  // console.log(tableData1.tableData);
  
})
// 分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pagesize.value=val
  // console.log(pagesize.value=val);
  
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  // console.log(val);
  currentPage.value=val

  
}
// 模态框
const closeK=((obj:any)=>{
    passshow.value=true
})
const close=(()=>{
    passshow.value=false
})
// 确定
const passbutton=(()=>{
    console.log('en');
    
})
// 编辑按钮
const passK=((obj:any)=>{
    route.push({
        path:"/Detail",
        query:{
          userId:obj.userId
        }
    })
})
// 筛选按钮
const onsai=(()=>{
  // console.log(keyword.value);
  // console.log(JSON.stringify(value2.value)==='[]')
  let a=keyword.value
  let b:any=value2.value
  if(JSON.stringify(value2.value)==='[]'){
    b=''
  }
  huo( nuser.newuserInformatio('',40,0,b,a))
  console.log(Total.value);
  
})
// 清除按钮
const onqin=(()=>{
  
})
</script>

<style scoped lang="less">
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
// 用户概况
.user{
    width: 100%;
    height:170px;
    background-color: white;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 20px;
}
.user-head{
    span:nth-child(1){
        margin-right: 10px;
    }
    span:nth-child(2){
        color: #999999;
        font-size: 14px;
    }
}
.user-view{
    width: 100%;
    height: 70%;
    display: flex;
    >div{
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
.aa1{
    font-size: 30px
}
.aa{
    color: #999999;
}
// 搜索框
.sou{
    margin-top: 10px;
    width: 100%;
    background-color: white;
    border-radius: 5px;
    height:196px;
    box-sizing: border-box;
    padding: 20px;
    font-size: 14px;
    span{
        margin-right: 10px;
        margin-left: 20px;
    }
    input{
        width: 180px;
        height:25px;
        margin-right: 60px
    }
}
.sou-button{
    margin: 20px 0 0 20px;
    button:nth-child(1){
        background-color: #ed742f;
        color: white;
        border-radius: 5px;
        border: 0;
        width: 60px;
        height:25px;
        margin-right: 20px;
        margin-top: 30px;
        // margin-left: 30px;
    }
    button:nth-child(2){
        background-color: white;
        color: #ed742f;
        border-radius: 5px;
        border: 1px solid #ed742f;
        width: 60px;
        height:25px;
        margin-left: 30px;
    }
}
// 用户标签选择框
.el-select{
    width: 400px !important;
}
// 表格内容
.view{
    width: 100%;
    height: 400px;
    background-color: white;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
// 分页
.el-pagination{
    position: absolute;
    bottom:20px;
    right:20px;
    z-index: 9999;
}
.refuse{
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
}

// 模态框公共样式
.refuseView-X{
  display: flex;
  align-items: center;
  justify-content:space-between ;
  border-bottom: 1px solid #e9e9e9;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  width: 100%;
  height: 40px;
  span:nth-child(1){
    color:#7a7a7a ;
  }
}

// 按钮

.closebutton{
      width: 110px;
      height: 35px;
      background-color: #ed742f;
      border: 1px solid #ed742f;
      border-radius: 5px;
      margin-right: 60px;
      margin-top: 20px;
      color: white;
    }
.passbutton{
      width: 110px;
      height: 35px;
      background-color: white;
      border: 1px solid green;
      border-radius: 5px;
      margin-top: 20px;
    }
  // 通过的模态框
.passView{
  position: absolute;
  width: 600px;
  height:400px;
  background-color: white;
  left:35%;
  top:20%;
  box-sizing: border-box;
  padding: 10px;
}
// 模态框按钮
.mobutton{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>